<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>easyui切换主题皮肤</title>
		<link rel="stylesheet" id="easyuiTheme" type="text/css" href="../../themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../demo.css">
		<style>
			.l-btn-plain {
				background: #666;
				color: #fff;
			}

			.menu {
				background: #666;
				color: #fff;
			}

			.m-btn-plain-active {}

			.nbgColor:hover {
				background: #666;
				color: #fff;
			}

			.menu-item:hover {
				background: #666;
				color: #fff;
				border: 1px solid #fff;
			}
			.actionBtn{
				position: fixed;
				right: 20px;
				top: 20px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="actionBtn">
				<a href="javascript:void(0);" class="easyui-menubutton nbgColor" data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
			</div>
		</div>
		<div id="layout_north_pfMenu" style=" display: none;">
			<div onclick="changeTheme('default');">default</div>
			<div onclick="changeTheme('black');">black</div>
			<div onclick="changeTheme('bootstrap');">bootstrap</div>
			<div onclick="changeTheme('gray');">gray</div>
			<div onclick="changeTheme('metro');">metro</div>
			<div onclick="changeTheme('material');">material</div>
		</div>

		<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
			<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
			<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
			<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
			<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
			<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
		</div>
		<script type="text/javascript" src="../../jquery.min.js"></script>
		<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
		<script>
			$('#mb').menubutton({
				iconCls: 'icon-edit',
				menu: '#mm'
			});
			function changeTheme(themeName) {
				var $easyuiTheme = $('#easyuiTheme');
				var url = $easyuiTheme.attr('href');
				var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
				$easyuiTheme.attr('href', href);
				var $iframe = $('html');
				if ($iframe.length > 0) {
					for (var i = 0; i < $iframe.length; i++) {
						var ifr = $iframe[i];
						$(ifr).contents().find('#easyuiTheme').attr('href', href);
					}
				}
			}
		</script>
	</body>
</html>
